<template>
  <div class="c-nav">
    <div v-for="(item, idx) in navData" :key="idx" @click="goto(idx, item)" :class="['nav-' + item.key, item.key === currentNavKey && 'nav-active']">
      <span></span>
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import env from "@/config/env";

@Component({
  name: "CNav",
  components: {}
})
export default class CNav extends Vue {
  /**
   * key对应的是router中的meta.nav字段，如果两个相同，增加选中(nav-active)状态
   */
  private navData: any[] = [
    { label: "首页", to: { name: "Home" }, class: "", key: "Home" },
    { label: "服务大厅", to: { name: "ServiceHall" }, class: "", key: "ServiceHall" },
    { label: "通知公告", to: { name: "Notice" }, class: "", key: "Notice" },
    { label: "应用系统", to: { name: "Application" }, class: "", key: "Application" },
    { label: "流程中心", to: { name: "Flow" }, class: "", key: "Flow" },
    // { label: "常用链接", to: { name: "Link" }, class: "", key: "Link" }
  ];

  // 需要权限才能显示的菜单
  private navData2: any[] = [{ label: "系统管理", url: env.systemManagementUrl, class: "", key: "System" }];

  private created() {
    this.getRouters();
  }

  private goto(idx: number, item: any) {
    if (item.url) {
      this.$tools.cOpen({ url: item.url });
    } else if (item.to) {
      this.$router.push(item.to);
    }
  }

  private async getRouters() {
    const res = await this.$api.GetRouters();
    if (res && res.code === 200) {
      // data有值，才允许显示权限菜单
      if (res.data && res.data.length > 0) {
        this.navData = [...this.navData, ...this.navData2];
      }
    }
  }

  private get currentNavKey() {
    return this.$route.meta.nav ? this.$route.meta.nav : "";
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.c-nav {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 4px;
  & > div {
    color: white;
    // .scale(width, 133px);
    width: 130px;
    height: 62px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 12px;

    &:first-child {
      margin-left: 0;
    }

    span:first-child {
      width: 26px;
      height: 26px;
    }
  }

  .nav-Home {
    span:first-child {
      background: url("./images/nav.png") left top no-repeat;
      background-size: 182px 52px;
    }
  }

  .nav-Notice {
    span:first-child {
      background: url("./images/nav.png") -26px top no-repeat;
      background-size: 182px 52px;
    }
  }

  .nav-Application {
    span:first-child {
      background: url("./images/nav.png") -52px top no-repeat;
      background-size: 182px 52px;
    }
  }

  .nav-Flow {
    span:first-child {
      background: url("./images/nav.png") -78px top no-repeat;
      background-size: 182px 52px;
    }
  }

  .nav-Link {
    span:first-child {
      background: url("./images/nav.png") -104px top no-repeat;
      background-size: 182px 52px;
    }
  }

  .nav-System {
    span:first-child {
      background: url("./images/nav.png") -130px top no-repeat;
      background-size: 182px 52px;
    }
  }

  .nav-ServiceHall {
    span:first-child {
      background: url("./images/nav.png") right top no-repeat;
      background-size: 182px 52px;
    }
  }

  .nav-active,
  & > div:hover {
    color: #2674d5;
    background-color: white;
    border-radius: 11px 11px 0px 0px;
    span:first-child {
      background-position-y: bottom;
    }
  }
}
</style>
